<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Product</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/headAndFoot.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/product/product.css" />
		<script src="lib/jquery-3.3.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<script src="lib/vue.js"></script>
		<script src="js/zxy/headAndFoot/headAndFoot.js"></script>
	</head>

	<body>
		<div id="all">
			<div id="topAdv"><a href="#"><img src="img/zxy/headAndFoot/topAdv.jpg"></a><div onClick="closeAdv()" id="closeAdv">X</div></div>
			<div id="head">
				<div id="headBox">
					<div id="headTop">
						<ul id="topLeft">
							<li class="topLeftLi"><a href="#">首页</a></li>
							<li class="topLeftLi"><a href="#">华为官网</a></li>
							<li class="topLeftLi"><a href="#">荣耀官网</a></li>
							<li class="topLeftLi"><a href="#">花粉俱乐部</a></li>
							<li class="topLeftLi"><a href="#">帮助中心</a></li>
							<li class="topLeftLi"><a href="#">V 码 (优购码)</a></li>
							<li class="topLeftLi"><a href="#">首企业购页</a></li>
							<li class="topLeftLi"><a href="#">Select Region</a></li>
							<li class="topLeftLi" id="qrcode"><a href="#">下载 APP<span class="caret"></span></a>
								<div >
									<img src="img/zxy/headAndFoot/qrcode.png"/>
									<p>扫一扫，下载客户端</p>
								</div>
							</li>
							<li class="topLeftLi" id="more"><a href="#">更多精彩<span class="caret"></span></a>
								<ul >
									<div><a href="#">EMUI</a></div>
									<div><a href="#">应用市场</a></div>
									<div><a href="#">华为终端云空间</a></div>
									<div><a href="#">开发者联盟</a></div>
								</ul>
						   </li>
						</ul>
						<ul id="topRight">
							<li class="topRightLi">
								<div id="loged" v-if="ifLogin">
									<a href="#">userName</a>
									<div id="userDrop">
										<div id="userInfo">
											<div id="userLeft">
												<a href="#"><img src="img/zxy/headAndFoot/img_logged_in.png" width="90px" height="90px"/></a>
											</div>
											<div id="userRight">
												<p><a>userName</a></p>
												<a href="#" class="realName"><span></span>未实名</a>
												<a href="#" class="i-mail"><span></span>站内信</a>
											</div>
										</div>
										<div id="userOrder">
											我的订单
											<a href="#">更多 ></a>
										</div>
										<div id="orderList">
											<ul>
												<li><a href="#">待支付</a></li>
												<li><a href="#">待收货</a></li>
												<li><a href="#">待评价</a></li>
												<li><a href="#">退换货</a></li>
												<li><a href="#">旧机回收</a></li>
											</ul>
										</div>
										<div id="otherInfo">
											<div class="discount">
												<a href="#"><span class="img01"></span></a>
												<p class="points">积分</p>
												<span>0分</span>
											</div>
											<div class="discount">
												<a href="#"><span class="img02"></span></a>
												<p class="points">优惠券</p>
												<span>0张</span>
											</div>
											<div class="discount">
												<a href="#"><span class="img03"></span></a>
												<p class="points">代金券</p>
												<span>0.00元</span>
											</div>
										</div>
										<div id="logout"><a href="#">退出登录</a></div>
									</div>
								</div>
								<div id="unlogin" v-else>
									<a href="#">请登录</a>
									<a href="#">注册</a>
								</div>
							</li>
							<li class="topRightLi" id="myOrder">
								<a href="#">我的订单</a>
							</li>
							<li class="topRightLi" id="cartShop">
								<a href="#">
									<span class="cartImg"></span>
									购物车(<font id="cartShopNum">0</font>)
								</a>
								<div class="miniCart" id="emptyCart" v-if="ifEmpty">
									<img src="img/zxy/headAndFoot/空购物车.png" width="100px" height="100px"/>
									<p>您的购物车是空的，赶紧选购吧~</p>
								</div>
								<div class="miniCart" id="cartShopBox" v-else>
									<ul class="cartShopBoxUl">
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										
									</ul>
									<div id="minicartBalance">
										<p>
											<span>总计:</span>
											<font>¥ 15043.00</font>
										</p>
										<a href="#">立即结算</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="header">
						<div class="left">
							<a href="#"><img src="img/zxy/headAndFoot/logo.png" /></a>
							<ul>
								<li><a href="#">华为专区</a></li>
								<li><a href="#">荣耀专区</a></li>
								<li><a href="#">HUAWEI P20</a></li>
								<li><a href="#">荣耀 10</a></li>
								<li><a href="#">nova 3i</a></li>
								<li><a href="#">荣耀 V10</a></li>
							</ul>
						</div>
						<div class="right">
							<div class="input-group">
							  <input type="text" class="form-control" placeholder="荣耀 Note10" aria-describedby="sizing-addon3">
							  <span class="input-group-btn">
					          	<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
					          </span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id="page">
				<div id="breadcrumb">
					<p>
						<a href="Main">首页</a>>
						<a v-bind:href="'GoodsList?method=goodsListForClassify&fcid='+fcid+'&scid=-1&sortWay=2&viewPage=1'">{{fcName}}</a>>
						<a v-bind:href="'GoodsList?method=goodsListForClassify&fcid='+fcid+'&scid='+scid+'&sortWay=2&viewPage=1'">{{scName}}</a>>
						<span>{{goodsName}}</span>
					</p>
				</div>
				<!--商品详情-->
				<div id="productProperty">
					<!--相册-->
					<div id="gallery">
						<div id="mousetrap"><img v-bind:src="showImg" width="450px" height="450px"/></div>
						<div id="gallerynav">
							<div class="galleryBack"><a href="javascript:;"></a></div>
							<div id="progallerys">
								<div class="productImgs">
									<div v-for="goodsImg in goodsImgs" class="productImg"><img v-on:click="changeShowImg(goodsImg)" v-bind:src="goodsImg" width="60px" height="60px"/></div>
								</div>
							</div>
							<div class="galleryForward"><a href="javascript:;"></a></div>
						</div>
					</div>
					<!--参数选项-->
					<div id="productOption">
						<!--商品全名-->
						<p id="productName">{{goodsName}}</p>
						<div id="promWord">
							<a href="#">{{discountMsg}}</a>
							<span>{{keyword}}</span>
						</div>
						<!--价格及促销信息-->
						<div id="productInfo">
							<!--价格-->
							<div id="priceTitle">
								<label class="priceLabel">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</label>
								<div id="productPriceInfo">
									<span v-if="discountPrice">抢购价 ¥</span>
									<font>{{price}}</font>
								</div>
							</div>
							<!--促销-->
							<div id="saleInfo">
								<label class="priceLabel">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</label>
								<div class="saleList">
									<p>
										<span class="saleTitle">限时特价</span>
										<span>限时优惠 200 元</span>
									</p>
									<p>
										<span class="saleTitle">下单立减</span>
										<span>下单立减 100 元，机会不容错过~</span>
									</p>
									<p>
										<span class="saleTitle">整点赠送</span>
										<span>10 点 / 16 点 / 20 点下单前 200 赠 AM115 耳机（荣耀指定手机共享）</span>
									</p>
									<p>
										<span class="saleTitle">赠送积分</span>
										<span>购买即赠商城积分，积分可抵现~</span>
									</p>
								</div>
							</div>
							
						</div>
						<!--服务说明-->
						<div id="postage">
							<span class="postageLabel">服务说明</span>
							<span class="postageLabel">已满 48 元已免运费</span>
							<span class="postageLabel">由华为商城负责发货，并提供售后服务</span>
							<br/>
							<span class="postageLabel">商品编码</span>
							<span class="postageLabel">{{goodsid}}</span>
						</div>
						<!--选择参数-->
						<div id="selectOption">
							<div v-for="paItems in paList" class="optionBox">
								<div class="optionName">选择{{paItems.attrName}}</div>
								<div class="optionItem">
									<a v-for="paItem in paItems.attrValues" 
										v-bind:data-attrvalueid="paItem.attrValueid" 
										v-bind:data-attrid="paItems.attrid" 
										v-bind:data-attrName="paItems.attrName" 
										v-bind:style="optionStatus(paItems.attrName,paItem.attrValueid)"
										v-bind:class="addOptionClass(paItem.attrValueid)" class="option" 
										v-on:click="changeOption(paItems.attrName,paItems.attrid,paItem.attrValueid,selectAttrList,tcid,$event)" href="javascript:void">
										<img v-if="paItem.imgSrc" v-bind:src="paItem.imgSrc" width="30px" height="30px" />
										<p>{{paItem.attrValueName}}</p>
									</a>
								</div>
							</div>
						</div>
						<!--已选参数-->
						<div id="selectedProduct">
							<span>已选择商品&nbsp;&nbsp;</span>
							<span v-for="(selectAttr,key) in selectAttrList">{{selectAttr.attrValue}}<span v-if="key<selectAttrList.length-1"> / </span></span>
						</div>
						<!--购买及加入购物车-->
						<div id="productBtn">
							<input v-on:blur="checkNum(num)" v-model.number.lazy="num" type="text" class="stockText" value="num"/>
							<div class="stockBtn">
								<a v-on:click="addNum" id="addProduct">+</a>
								<a v-on:click="decreaseNum" id="minusProduct">-</a>
							</div>
							<input v-if="count>0" v-on:click="addCart(goodsid,num)" type="button" class="optionBtn" id="addCart" value="加入购物车"/>
							<input v-if="count>0" v-on:click="orderNow(goodsid,num)" type="button" class="optionBtn" id="orderNow" value="立即下单"/>
							<input v-else type="button" disabled="true" class="optionBtn" id="outStorge" value="暂时无货"/>
						</div>
					</div>
				</div>
				<!--关联商品-->
				<div id="productRelation">
					<p>关联商品</p>
					<div id="relateList">
						<a href="#">
							<div class="relateItem">
								<div class="relateImg"><img  src="img/zxy/product/glsp1.jpg" width="64px" height="64px"/></div>
								<div class="relateDetail">
									（热门配件）荣耀智能体脂秤 魔秤 体重秤<br/>
									<em>¥169</em>
								</div>
							</div>
						</a>
						
						<a href="#">
							<div class="relateItem">
								<div class="relateImg"><img  src="img/zxy/product/glsp2.jpg" width="64px" height="64px"/></div>
								<div class="relateDetail">
									（热门配件）荣耀畅玩手环 A2<br/>
									<em>¥149</em>
								</div>
							</div>
						</a>
						
						<a href="#">
							<div class="relateItem">
								<div class="relateImg"><img  src="img/zxy/product/glsp3.jpg" width="64px" height="64px"/></div>
								<div class="relateDetail">
									荣耀 V10<br/><br/>
									<em>¥2799</em>
								</div>
							</div>
						</a>
						
						<a href="#">
							<div class="relateItem">
								<div class="relateImg"><img  src="img/zxy/product/glsp4.jpg" width="64px" height="64px"/></div>
								<div class="relateDetail">
									（热门配件）荣耀 xSport 运动蓝牙耳机<br/>
									<em>¥249</em>
								</div>
							</div>
						</a>
					</div>
				</div>
				<!--商品介绍-->
				<div id="particulars">
					<div id="particularsOption">
						<a href="#detail">商品详情</a>
						<a href="#parameters">规格参数</a>
						<a href="#packageService">包装与售后</a>
						<a href="#evaluate">用户评价(73339)</a>
					</div>
				</div>
				<div id="detail">
					<img v-for="detailimg in detailimgs" v-bind:src="detailimg" />
				</div>
				<!--规格参数-->
				<div id="parameters">
					<p>规格参数</p>
					<div id="parametersBox">
						<div id="parametersTitle">主要参数</div>
						<div id="parametersDetail">
							<table cellpadding="51" cellspacing="20">
								<tr>
									<td>传播名</td>
									<td>荣耀 10</td>
								</tr>
								<tr>
									<td>上市时间</td>
									<td>2018 年 4 月</td>
								</tr>
								<tr>
									<td>CPU 型号</td>
									<td>HUAWEI Kirin 970 （麒麟 970）</td>
								</tr>
								<tr>
									<td>CPU 核数</td>
									<td>八核 + 微智核 i7</td>
								</tr>
								<tr>
									<td>双卡</td>
									<td>双卡双待单通</td>
								</tr>
								<tr>
									<td>屏幕尺寸</td>
									<td>5.84 英寸</td>
								</tr>
								<tr>
									<td>屏幕色彩</td>
									<td>1600 万色，色彩饱和度（NTSC）：96%（典型值）</td>
								</tr>
								<tr>
									<td>分辨率</td>
									<td>2280 x 1080 像素</td>
								</tr>
								<tr>
									<td>运行内存（RAM）</td>
									<td>6GB（备注：可使用的内存容量小于此值，因为手机软件占用的空间）</td>
								</tr>
								<tr>
									<td>机身内存（ROM）</td>
									<td>64GB（备注：可使用的内存容量小于此值，因为手机软件占用的空间）</td>
								</tr>
								<tr>
									<td>前置摄像头</td>
									<td>2400 万像素，f/2.0 光圈，支持固定焦距；备注：不同拍照模式的照片像素可能有差异，请以实际为准。</td>
								</tr>
								<tr>
									<td>后置摄像头</td>
									<td>1600 万（彩色）像素＋2400 万（黑白）像素，f/1.8 光圈，支持自动对焦（深度对焦 / 相位对焦 / 反差对焦）；备注：不同拍照模式的照片像素可能有差异，请以实际为准。</td>
								</tr>
								<tr>
									<td>电池容量</td>
									<td>3400mAh（典型值）</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<!--包装售后-->
				<div id="packageService">
					<div id="package">
						<p>包装</p>
						<ul id="packageList">
							<li>手机 X 1</li>
							<li>电池（内置） X 1</li>
							<li>快速指南 X 1</li>
							<li>5V4.5A SuperCharge 充电器 X 1</li>
							<li>三包凭证 X 1</li>
							<li>5V4.5A Type-C 数据线 X 1</li>
							<li>卡座捅针 X 1</li>
							<li>TPU 保护壳 X 1</li>
							<li>荣耀宣传卡片 X 1</li>
							<li>TP 保护膜（出厂已贴在手机上）</li>
						</ul>
					</div>
					<div id="service">
						<p>售后</p>
						<ul id="serviceList">
							<li>本产品全国联保，享受三包服务，质保期为：一年质保</li>
							<li>如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受 7 天内退货，15 日内换货，15 日以上在质保期内享受免费保修等三包服务！</li>
							<li>售后服务电话：400-830-8300</li>
							<li>华为消费者 BG 官网： https://consumer.huawei.com/cn/</li>
						</ul>
					</div>
				</div>
				
				<!--用户评价-->
				<div id="evaluate">
					<div id="evaluateTitle">
						<div id="evaluateTitleBox">
							<div>好评率</div>
							<div id="evaluateScore">97%</div>
							<div>买家印象</div>
							<div id="evaluateImpression">
								<a href="javascript:void">
									<em>性能流畅</em>
									<span>21107</span>
								</a>
								<a href="javascript:void">
									<em>解锁秒开</em>
									<span> 17013</span>
								</a>
								<a href="javascript:void">
									<em>智能识别快</em>
									<span> 15869</span>
								</a>
								<a href="javascript:void">
									<em>超级快充</em>
									<span> 14730</span>
								</a>
								<a href="javascript:void">
									<em>随手拍大片</em>
									<span> 7753</span>
								</a>
								<a href="javascript:void">
									<em>大屏震撼</em>
									<span> 5912</span>
								</a>
								<a href="javascript:void">
									<em>影音现场感强</em>
									<span> 5298</span>
								</a>
								<a href="javascript:void">
									<em>AR 好玩</em>
									<span> 3922</span>
								</a>
							</div>
						</div>
					</div>
					<div id="evaluateBox">
						<div id="evaluateOption">
							<a href="#">最热门</a>
							<a href="#">最新</a>
							<a href="#">有图</a>
						</div>
						<div id="evaluateContent">
							<div class="evaluateDetail">
								<div class="userInfo">
									<img src="img/zxy/product/userImg.png" width="70px" height="70px"/>
									<p class="userName">夏 *** 殤</p>
								</div>
								<div class="userComment">
									<div class="starts"></div>
									<div class="commentWord">
										手机运行流畅，第三个华为手机，真的很不错呀，
										送的耳机音质感觉也很好诶，物有所值，希望能陪伴我这几年的学习~手机运行流畅，
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
									</div>
									<div class="commentImg">
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
									</div>
									<div class="commentTime">2018-09-08 15:57:49</div>
									<div class="commentReplay">
										<span>华为商城客服：</span>
										确认过眼神，宝宝有遇见对的主人~
									</div>
								</div>
							</div>
							<div class="evaluateDetail">
								<div class="userInfo">
									<img src="img/zxy/product/userImg.png" width="70px" height="70px"/>
									<p class="userName">夏 *** 殤</p>
								</div>
								<div class="userComment">
									<div class="starts"></div>
									<div class="commentWord">
										手机运行流畅，第三个华为手机，真的很不错呀，
										送的耳机音质感觉也很好诶，物有所值，希望能陪伴我这几年的学习~手机运行流畅，
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
									</div>
									<div class="commentImg">
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
									</div>
									<div class="commentTime">2018-09-08 15:57:49</div>
									<div class="commentReplay">
										<span>华为商城客服：</span>
										确认过眼神，宝宝有遇见对的主人~
									</div>
								</div>
							</div>
							<div class="evaluateDetail">
								<div class="userInfo">
									<img src="img/zxy/product/userImg.png" width="70px" height="70px"/>
									<p class="userName">夏 *** 殤</p>
								</div>
								<div class="userComment">
									<div class="starts"></div>
									<div class="commentWord">
										手机运行流畅，第三个华为手机，真的很不错呀，
										送的耳机音质感觉也很好诶，物有所值，希望能陪伴我这几年的学习~手机运行流畅，
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
									</div>
									<div class="commentImg">
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
									</div>
									<div class="commentTime">2018-09-08 15:57:49</div>
									<div class="commentReplay">
										<span>华为商城客服：</span>
										确认过眼神，宝宝有遇见对的主人~
									</div>
								</div>
							</div>
							<div class="evaluateDetail">
								<div class="userInfo">
									<img src="img/zxy/product/userImg.png" width="70px" height="70px"/>
									<p class="userName">夏 *** 殤</p>
								</div>
								<div class="userComment">
									<div class="starts"></div>
									<div class="commentWord">
										手机运行流畅，第三个华为手机，真的很不错呀，
										送的耳机音质感觉也很好诶，物有所值，希望能陪伴我这几年的学习~手机运行流畅，
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
									</div>
									<div class="commentImg">
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
									</div>
									<div class="commentTime">2018-09-08 15:57:49</div>
									<div class="commentReplay">
										<span>华为商城客服：</span>
										确认过眼神，宝宝有遇见对的主人~
									</div>
								</div>
							</div>
							<div class="evaluateDetail">
								<div class="userInfo">
									<img src="img/zxy/product/userImg.png" width="70px" height="70px"/>
									<p class="userName">夏 *** 殤</p>
								</div>
								<div class="userComment">
									<div class="starts"></div>
									<div class="commentWord">
										手机运行流畅，第三个华为手机，真的很不错呀，
										送的耳机音质感觉也很好诶，物有所值，希望能陪伴我这几年的学习~手机运行流畅，
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
										第三个华为手机，真的很不错呀，送的耳机音质感觉也很好诶，物有所值，
										希望能陪伴我这几年的学习~
									</div>
									<div class="commentImg">
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
										<img src="img/zxy/product/commentImg1.jpg" width="80px" height="80px"/>
									</div>
									<div class="commentTime">2018-09-08 15:57:49</div>
									<div class="commentReplay">
										<span>华为商城客服：</span>
										确认过眼神，宝宝有遇见对的主人~
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="clear: both"></div>
			</div>

			<div id="foot">
				<div id="footBox">
					<div id="footTop">
						<div>
							<a href="#">
								<span class="slogan1"></span>
								<span>百强企业 品质保证</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan2"></span>
								<span>7 天退货 15 天换货</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan3"></span>
								<span>48 元起免运费</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan4"></span>
								<span>448 家维修网点 全国联保</span>
							</a>
						</div>
					</div>
					<div id="footMid">
						<div class="footList">
							<ul>
								<p>购物相关</p>
								<li>
									<a href="#">购物指南</a>
								</li>
								<li>
									<a href="#">配送方式</a>
								</li>
								<li>
									<a href="#">支付方式</a>
								</li>
								<li>
									<a href="#">常见问题</a>
								</li>
							</ul>
							<ul>
								<p>保修与退换货</p>
								<li>
									<a href="#">保修政策</a>
								</li>
								<li>
									<a href="#">退换货政策</a>
								</li>
								<li>
									<a href="#">退换货流程</a>
								</li>
								<li>
									<a href="#">保修状态查询</a>
								</li>
								<li>
									<a href="#">配件防伪查询</a>
								</li>
							</ul>
							<ul>
								<p>维修与技术支持</p>
								<li>
									<a href="#">售后网点</a>
								</li>
								<li>
									<a href="#">预约维修</a>
								</li>
								<li>
									<a href="#">手机寄修</a>
								</li>
								<li>
									<a href="#">备件价格查询</a>
								</li>
								<li>
									<a href="#">上门服务</a>
								</li>
							</ul>
							<ul>
								<p>关于我们</p>
								<li>
									<a href="#">公司介绍</a>
								</li>
								<li>
									<a href="#">华为商城简介</a>
								</li>
								<li>
									<a href="#">华为线下门店</a>
								</li>
								<li>
									<a href="#">荣耀线下门店</a>
								</li>
								<li>
									<a href="#">诚征英才</a>
								</li>
							</ul>
							<ul>
								<p>关注我们</p>
								<li>
									<a href="#">新浪微博</a>
								</li>
								<li>
									<a href="#">腾讯微博</a>
								</li>
								<li>
									<a href="#">花粉俱乐部</a>
								</li>
							</ul>
							<ul>
								<p>友情链接</p>
								<li>
									<a href="#">华为官网</a>
								</li>
								<li>
									<a href="#">华为商城手机版</a>
								</li>
								<li>
									<a href="#">荣耀官网</a>
								</li>
								<li>
									<a href="#">花粉俱乐部</a>
								</li>
								<li>
									<a href="#">网站地图</a>
								</li>
							</ul>

						</div>
						<div class="serviceTel">
							<p>400-088-6888</p>
							<span>24 小时客服热线（仅收市话费）</span>
							<a>
								<div>
									<font>在线客服</font>
								</div>
							</a>
						</div>
					</div>
					<div id="footBottom">
						<div id="copyright">
							<div id="copyrightLeft"><a href="#"><div></div></a></div>
							<div id="copyrightMid">
								<p><a>隐私声明</a> <a>服务协议</a> Copyright © 2012-2018 华为软件技术有限公司 版权所有 保留一切权利</p>
								<p>公安备案 苏公网安备 32011402010009 号 | 苏 ICP 备 17040376 号 - 6 | 增值电信业务经营许可证：苏 B2-20130048 号 |</p>
							</div>
							<div id="copyrightLogo">
								<a href="#"><img src="img/zxy/headAndFoot/copyright1.jpg"  width="70px" height="24px"/></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright2.png"  width="70px" height="24px"/></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright3.png"  width="70px" height="24px" /></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright4.png"  width="70px" height="24px" /></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--获取隐式对象  -->
		<span 
			data-iflogin="${ifLogin }" 
			data-ifempty="${ifEmpty }" 
			data-userid="${user.userid }" 
			data-usertel="${user.tel }" 
			id="getData" style="display:none">
		</span>
		
		<script src="js/zxy/product/product.js"></script>
		<script>
			//获取request中的数据
			var goodsName='${requestScope.goodsName}';
			console.log("goodsName:"+goodsName);
			var count='${requestScope.count}';
			var countNum = new Number(count);
			count=countNum.toFixed(0);
			console.log("count:"+count);
			var discountMsg='${requestScope.discountMsg}';
			console.log("discountMsg:"+discountMsg);
			var keyword='${requestScope.keyword}';
			console.log("keyword:"+keyword);
			var price='${requestScope.price}';
			console.log("price:"+price);
			var discountPrice='${requestScope.discountPrice}';
			console.log("discountPrice:"+discountPrice);
			var goodsid='${requestScope.goodsid}';
			console.log("goodsid:"+goodsid);
			var tcid='${requestScope.tcid}';
			console.log("tcid:"+tcid);
			var scid='${requestScope.scid}';
			console.log("scid:"+scid);
			var fcid='${requestScope.fcid}';
			console.log("fcid:"+fcid);
			var fcName='${requestScope.fcName}';
			console.log("fcName:"+fcName);
			var scName='${requestScope.scName}';
			console.log("scName:"+scName);
			
			
			
			//商品展示图片
			var goodsImgStr='${requestScope.goodsImgStr}';
			console.log("goodsImgStr:"+goodsImgStr);
			var goodsImgs=$.parseJSON(goodsImgStr);
			console.log(goodsImgs);
			
			/* var gallery=new Vue({
				el:"#gallery",
				data:{
					goodsImgs:goodsImgs,
					showImg:goodsImgs[0],
				},
				methods:{
					changeShowImg:function(goodsImg){
						this.showImg=goodsImg;
					},
				},
			}); */
			
			
			/*
			商品参数实现动态变化：
			首先，一开始进入商品详情页时默认选择了一项商品，如goodsid=1的荣耀10 6GB 幻影紫，
			配置选项应该包括荣耀10所有的选项参数，如颜色：幻影紫/幻影蓝，版本：6GB/8GB。
			选中的配置参数边框变红，如此时默认的荣耀10 6GB 幻影紫，所以幻影紫和6GB边框变红，然后其他的
			参数边框为默认灰色。再根据此时选择的颜色来决定其他选项参数是否可用，如拥有幻影紫颜色的商品
			只有6GB 幻影紫这一种配置，所以版本参数只有6GB可用，其他的8GB应该设置disable为true(只有颜色
			以外的参数需要考虑是否禁用)。
			然后是选择其他参数时分为两种情况，一种是改变颜色，另外就是改变颜色以外的参数：
			1.改变颜色，将改变的颜色valueid和attrid/tcid以及其他参数的valueid传入，用attrid判断是否为颜色选项
			先将所有valueid在goods_allocation中查找看是否有拥有所有valueid的商品，有则该商品的信息返回，
			如果找不到说明该颜色配置的商品没有其他之前选中的参数，所以改为拥有该颜色valueid的其他商品再返回
			2.改变颜色以外的参数，因为除了颜色以外的参数都是可选即为可用的，只需要在配置表中找到对应的商品id，
			并将该商品信息进行返回即可
			*/
			//获取商品配置参数
			var paListStr='${requestScope.paListStr}';
			console.log("paListStr:"+paListStr);
			var paList=$.parseJSON(paListStr);
			console.log(paList);
			//获取已经选择的商品配置参数
			var selectAttrListStr='${requestScope.selectAttrListStr}';
			console.log("selectAttrListStr:"+selectAttrListStr);
			var selectAttrList=$.parseJSON(selectAttrListStr);
			console.log(selectAttrList);
			//根据选择的颜色获取其他可选用的参数
			var optionalAttrListStr='${requestScope.optionalAttrListStr}';
			console.log("optionalAttrListStr:"+optionalAttrListStr);
			var optionalAttrList=$.parseJSON(optionalAttrListStr);
			console.log(optionalAttrList);
			
			//将商品列表的数组型字符串转为json数组型对象
			var detailImgsStr='${requestScope.tcImg}';
			console.log("detailImgsStr:"+detailImgsStr);
			var detailimgs=$.parseJSON(detailImgsStr);
			console.log(detailimgs);
			
			/* //商品详情图片
			var detail=new Vue({
				el:"#detail",
				data:{
					detailimgs:detailimgs,
				}
			}); */
			
			var page=new Vue({
				el:"#page",
				filters:{
					number:function(num){
						return num.toFixed(0);
					}
				},
				data:{
					num:1,
					detailimgs:detailimgs,
					scName:scName,
					fcName:fcName,
					goodsName:goodsName,
					count:count,
					discountMsg:discountMsg,
					keyword:keyword,
					price:price,
					discountPrice:discountPrice,
					goodsid:goodsid,
					tcid:tcid,
					scid:scid,
					fcid:fcid,
					paList:paList,
					selectAttrList:selectAttrList,
					optionalAttrList:optionalAttrList,
					selectOption:{
						borderColor:'#C6141C',
					},
					defaultOption:{
						borderColor:'#a4a4a4',
					},
					disableClass:{
						borderColor:'#E4E4E4',
						color:'#E4E4E4',
						pointerEvents:"none",
						cursor:'not-allowed',
					},
					goodsImgs:goodsImgs,
					showImg:goodsImgs[0],
				},
				computed:{
					
				},
				methods:{
					checkNum:function(val){
						if(val === "" || val ==null){
					        this.num=1;
					        return;
					    }
					    if(!isNaN(val)){
					    	if(val>count){
						        this.num=count;
					    	}
					        return;
					    }
					    else{
					    	this.num=1;
					        return;
					    }
					},
					addNum:function(){
						if(this.num>=this.count){
							this.num=count;
						}
						else{
							this.num++;
						}
					},
					decreaseNum:function(){
						if(this.num<=1){
							this.num=1;
						}
						else{
							this.num--;
						}
					},
					//添加到购物车
					addCart:function(goodsid,num){
						$.ajax({
							type:"POST",
							url:"CartShop?method=addGoods",
							data:{
								goodsid:goodsid,
								num : num,
							},
							success:function(data){
								if(data=="1"){
									alert("成功添加到购物车!");
								}
								else{
									alert("添加失败!");
								}
							},
							error:function(){
								alert("error");
							},
						});
					},
					orderNow:function(goodsid,num){
						alert(goodsid+":"+num);
					},
					changeShowImg:function(goodsImg){
						this.showImg=goodsImg;
					},
					optionStatus:function(attrName,attrValueid){
						for(var i=0;i<selectAttrList.length;i++){
							if(selectAttrList[i].attrValueid==attrValueid){
								return this.selectOption;
							}
						}
						if(attrName=='颜色'){
							return this.defaultOption;
						}
						
						else if(this.optionalAttrList.indexOf(attrValueid*1)!=-1){
							return this.defaultOption;
						}
						else{
							return this.disableClass;
						}
					},
					addOptionClass:function(attrValueid){
						for(var i=0;i<selectAttrList.length;i++){
							if(selectAttrList[i].attrValueid==attrValueid){
								return "selectAttrValue";
							}
						}
						return "defaultAttrValue";
					},
					changeOption:function(attrName,attrid,attrValueid,selectAttrList,tcid,event){
						var selectAttrListStr2=JSON.stringify(selectAttrList);
						$.ajax({
							type:"POST",
							url:"Product?method=ajaxTest",
							data:{
								attrName:attrName,
								attrid : attrid,
		                    	attrValueid:attrValueid,
		                    	selectAttrListStr2:selectAttrListStr2,
		                    	tcid:tcid,
							},
							success:function(data){
								console.log(data);
								var message=$.parseJSON(data);
								console.log(message);
								console.log(message.goodsInfo.goodsName);
								page.goodsName=message.goodsInfo.goodsName;
								page.discountMsg=message.goodsInfo.discountMsg;
								page.keyword=message.goodsInfo.keyword;
								page.price=message.goodsInfo.price;
								page.discountPrice=message.goodsInfo.discountPrice;
								page.goodsid=message.goodsInfo.goodsid;
								page.selectAttrList=message.selectAttrList;
								page.optionalAttrList=message.optionalAttrList;
								page.goodsImgs=message.goodsImgs;
								page.showImg=message.goodsImgs[0];
								page.count=message.goodsInfo.count;
								changeBorder(message.selectAttrList,message.optionalAttrList,paList);
							},
							error:function(){
								alert("error");
							},
						});
					},
					
				}
			});
			function changeBorder(selectAttrList,optionalAttrList,paList){
				console.log("selectAttrList:");
				console.log(selectAttrList);
				console.log("optionalAttrList:");
				console.log(optionalAttrList);
				console.log("paList:"+paList);
				
				jQuery("#selectOption .optionItem .option").each(function(){
					
					if(jQuery(this).data("attrname")=='颜色'){
						jQuery(this).css("borderColor","#a4a4a4").css("pointerEvents","auto")
						.css("color","black").css("cursor","pointer");
					}
					else if(optionalAttrList.indexOf(jQuery(this).data("attrvalueid")*1)!=-1){
						jQuery(this).css("borderColor","#a4a4a4").css("pointerEvents","auto")
						.css("color","black").css("cursor","pointer");
					}
					else{
						jQuery(this).css("borderColor","#E4E4E4").css("pointerEvents","none")
						.css("color","#E4E4E4").css("cursor","not-allowed");
					}
					for(var i=0;i<selectAttrList.length;i++){
						if(selectAttrList[i].attrValueid==jQuery(this).data("attrvalueid")){
							jQuery(this).css("borderColor","#CA141D").css("pointerEvents","auto")
								.css("color","black").css("cursor","pointer");
						}
					}
					
				})
				
			}
			
			/* <!--选择参数-->
			<div id="selectOption">
				<div v-for="paItems in paList" class="optionBox">
					<div class="optionName">选择{{paItems.attrName}}</div>
					<div class="optionItem">
						<a v-for="paItem in paItems.attrValues" 
							v-bind:data-attrvalueid="paItem.attrValueid" 
							v-bind:data-attrid="paItems.attrid" 
							v-bind:data-attrName="paItems.attrName" 
							v-bind:style="optionStatus(paItems.attrName,paItem.attrValueid)"
							v-bind:class="addOptionClass(paItem.attrValueid)" class="option" 
							v-on:click="changeOption(paItems.attrName,paItems.attrid,paItem.attrValueid,selectAttrList,tcid,$event)" href="javascript:void">
							<img v-if="paItem.imgSrc" v-bind:src="paItem.imgSrc" width="30px" height="30px" />
							<p>{{paItem.attrValueName}}</p>
						</a>
					</div>
				</div>
			</div> */
			
			
			
			
			
			
			
		</script>
	</body>
</html>